如何下载Angular4

1

我认为你最好的选择是使用SystemJs加载系统。您需要将所有已编译的角码下载到文件夹中，并为systemjs配置中的文件提供路径。通过这种方式，您不必使用任何构建系统行webpack，cli，grunt或任何npm。

下面是一个典型的systemjs配置文件。

** 
* System configuration for Angular samples 
* Adjust as necessary for your application needs. 
*/ 
(function (global) { 
    System.config({ 
    defaultExtension: 'js', 
    paths: { 
     // paths serve as alias 
     'npm:': 'node_modules/' 
    }, 
    // map tells the System loader where to look for things 
    map: { 
     // our app is within the app folder 
     app: 'app', 

     // angular bundles 
     '@angular/core': 'npm:@angular/core/bundles/core.umd.js', 
     '@angular/common': 'npm:@angular/common/bundles/common.umd.js', 
     '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js', 
     '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js', 
     '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js', 
     '@angular/http': 'npm:@angular/http/bundles/http.umd.js', 
     '@angular/router': 'npm:@angular/router/bundles/router.umd.js', 
     '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js', 

     // other libraries 
     'rxjs':      'npm:rxjs', 
     'angular-in-memory-web-api': 'npm:angular-in-memory-web-api', 
    }, 
    // packages tells the System loader how to load when no filename and/or no extension 
    packages: { 
     app: { 
     main: './main.js', 
     defaultExtension: 'js' 
     }, 
     rxjs: { 
     defaultExtension: 'js' 
     }, 
     'angular-in-memory-web-api': { 
     main: './index.js', 
     defaultExtension: 'js' 
     } 
    } 
    }); 
})(this);

您可以使用此哟发生器快速启动yo: angular2 with systemjs。由于角度是在版本4中，你需要找到umd build，它将在build文件夹中。

有，您可以探索其他方式，但我认为你将面临的挑战，因为它是一个不同的路径和大多数的人都fllowing CLI或的WebPack构建系统

来源

2017-09-05 12:16:31

1

有作为CDN对于Angular4没有这样的事情。

Angular在ES6上。所以基本的过程是你写你的ES6代码&将它转储到ES5。

Angular需要这种可以保留在CDN上的依赖关系。

<script src="https://unpkg.com/[email protected]/client/shim.min.js"></script> 
    <script src="https://unpkg.com/zone.js/dist/zone.js"></script> 
    <script src="https://unpkg.com/zone.js/dist/long-stack-trace-zone.js"></script> 
    <script src="https://unpkg.com/[email protected]/Reflect.js"></script> 
    <script src="https://unpkg.com/[email protected]/dist/system.js"></script>

接下来，使用SystemJS

典型SystemJS文件

var angularVersion; 
if(window.AngularVersionForThisPlunker === 'latest'){ 
    angularVersion = ''; //picks up latest 
} 
else { 
    angularVersion = '@' + window.AngularVersionForThisPlunker; 
} 

System.config({ 
    //use typescript for compilation 
    transpiler: 'typescript', 
    //typescript compiler options 
    typescriptOptions: { 
    emitDecoratorMetadata: true 
    }, 
    paths: { 
    'npm:': 'https://unpkg.com/' 
    }, 
    //map tells the System loader where to look for things 
    map: { 

    'app': './src', 
    '@angular/core': 'npm:@angular/core'+ angularVersion + '/bundles/core.umd.js', 
    '@angular/common': 'npm:@angular/common' + angularVersion + '/bundles/common.umd.js', 
    '@angular/compiler': 'npm:@angular/compiler' + angularVersion + '/bundles/compiler.umd.js', 
    '@angular/platform-browser': 'npm:@angular/platform-browser' + angularVersion + '/bundles/platform-browser.umd.js', 
    '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic' + angularVersion + '/bundles/platform-browser-dynamic.umd.js', 
    '@angular/http': 'npm:@angular/http' + angularVersion + '/bundles/http.umd.js', 
    '@angular/router': 'npm:@angular/router' + angularVersion +'/bundles/router.umd.js', 
    '@angular/forms': 'npm:@angular/forms' + angularVersion + '/bundles/forms.umd.js', 
    '@angular/animations': 'npm:@angular/animations' + angularVersion + '/bundles/animations.umd.js', 
    '@angular/platform-browser/animations': 'npm:@angular/platform-browser' + angularVersion + '/bundles/platform-browser-animations.umd.js', 
    '@angular/animations/browser': 'npm:@angular/animations' + angularVersion + '/bundles/animations-browser.umd.js', 

    '@angular/core/testing': 'npm:@angular/core' + angularVersion + '/bundles/core-testing.umd.js', 
    '@angular/common/testing': 'npm:@angular/common' + angularVersion + '/bundles/common-testing.umd.js', 
    '@angular/compiler/testing': 'npm:@angular/compiler' + angularVersion + '/bundles/compiler-testing.umd.js', 
    '@angular/platform-browser/testing': 'npm:@angular/platform-browser' + angularVersion + '/bundles/platform-browser-testing.umd.js', 
    '@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic' + angularVersion + '/bundles/platform-browser-dynamic-testing.umd.js', 
    '@angular/http/testing': 'npm:@angular/http' + angularVersion + '/bundles/http-testing.umd.js', 
    '@angular/router/testing': 'npm:@angular/router' + angularVersion + '/bundles/router-testing.umd.js', 
    'tslib': 'npm:[email protected]', 
    'rxjs': 'npm:rxjs', 
    'typescript': 'npm:[email protected]/lib/typescript.js' 
    }, 
    //packages defines our app package 
    packages: { 
    app: { 
     main: './main.ts', 
     defaultExtension: 'ts' 
    }, 
    rxjs: { 
     defaultExtension: 'js' 
    } 
    } 
});

看到这一行

'npm:': 'https://unpkg.com/'

在这里，您可以提供CDN。

演示例子 https://plnkr.co/edit/tpl:AvJOMERrnz94ekVua0u5?p=preview

然后在您的index.html 你告诉加载应用程序。

<script src="config.js"></script> 
    <script> 
    System.import('app') 
     .catch(console.error.bind(console)); 
    </script>

来源

2017-09-05 12:19:35

2

在您的机器上运行Angular 4（我希望它是linux）。安装角度cli here

使用Angular cli，您可以非常快地启动应用程序。只要按照指导。它简单而高效。确保你还安装了节点。

有关Angular Cli的一点小贴士。它用于创建项目环境将运行项目所需的所有必要资源。

来源

2017-11-01 10:23:44

如何下载Angular4

回答

相关问题