Question

我是Angular世界的新手，正在尝试使用MEAN堆栈构建网站。我遇到了问题，无法继续下去。我得到的错误是

我的systemjs.config.js如下 -

(function(global) {
  System.config({
    paths: { 'npm:' : 'node_modules/'},
    map: {
      app: '/app',
      '@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',
      'rxjs': 'npm:rxjs'
    },

    packages: {
      app: { main: './main.js', defaultExtension: 'js'},
      rxjs: { defaultExtension: 'js'}
    }
  });
})(this);

的index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">    
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/spacelab/bootstrap.min.css">

    <style>body { padding: 50px 0;}</style>
    <title>ng-Trader</title>

    <script src="core-js/client/shim.min.js"></script>
    <script src="zone.js/dist/zone.js"></script>
    <script src="reflect-metadata/Reflect.js"></script>

    <script src="systemjs/dist/system.src.js"></script>
    <script src="systemjs.config.js"></script>
    <script>
        System.import('app').catch(function(err) { console.error(err); })
    </script>
</head>
<body class="container">
    ng Trader Application.
</body>
</html>

Main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

我在节点server.js文件中使用express.static提供页面。

应用程序的结构是

Answer 1

想出来。事实证明，当我从节点服务器传递静态文件时，我不需要node_modules的映射。

所以systemjs.config.js改为（function（global）{

  System.config({    
    map: {
    app: '/app',
  '@angular/core': '@angular/core/bundles/core.umd.js',
  '@angular/common': '@angular/common/bundles/common.umd.js',
  '@angular/compiler': '@angular/compiler/bundles/compiler.umd.js',
  '@angular/platform-browser': '@angular/platform-browser/bundles/platform-browser.umd.js',
  '@angular/platform-browser-dynamic': '@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
  '@angular/http': '@angular/http/bundles/http.umd.js',
  '@angular/router': '@angular/router/bundles/router.umd.js',
  '@angular/forms': '@angular/forms/bundles/forms.umd.js',
  'rxjs': 'rxjs'
},
// /bundles/platform-browser-dynamic.umd.js
packages: {
  app: { main: './main.js', defaultExtension: 'js'},
  rxjs: { defaultExtension: 'js'}
    }
  });
})(this);

即使在路径中指定/ bundles后，找不到platform-browser-dynamic.umd.js

1 个答案:

即使在路径中指定/ bundles后，找不到platform-b​​rowser-dynamic.umd.js

1 个答案:

即使在路径中指定/ bundles后，找不到platform-browser-dynamic.umd.js