Question

我是网络编程的新手。试图通过“Mean Web Development”第二版的书中的例子。在Angular被引入之前，它一直很好。我试图从本书的第7章开始运行一个例子，我在浏览器中看到的唯一一件事是“正在加载......” 我可以看到它抱怨：

这是index.ejs文件：

<!DOCTYPE html>
<html>
<head>
	<title><%= title %></title>
	<base href="/">
</head>
<body>
	<mean-app>
		<h1>Loading...</h1>
	</mean-app>

	<script type="text/javascript">
		window.user = <%- user || 'null' %>;
	</script>

	<script src="lib/core-js/client/shim.min.js"></script>
	<script src="lib/zone.js/dist/zone.js"></script>
	<script src="lib/reflect-metadata/Reflect.js"></script>
	<script src="lib/systemjs/dist/system.js"></script>


  <script src="./systemjs.config.js"></script>

	<script>
		System.import('app').catch(function(err)
		{ console.error(err); });
	</script>


</body>
</html>

和systemjs.config.js文件：

(function(global) {
  var packages = {
    app: {
      main: './bootstrap.js',
      defaultExtension: 'js'
    }
  };

  var map = {
    '@angular': 'lib/@angular',
    'rxjs': 'lib/rxjs'
  };

  var ngPackageNames = [
    'common',
    'compiler',
    'core',
    'forms',
    'http',
    'router',
    'platform-browser',
    'platform-browser-dynamic',
  ];

  ngPackageNames.forEach(function(pkgName) {
    packages['@angular/' + pkgName] =
    { main: '/bundles/' + pkgName + '.umd.js',
      defaultExtension: 'js' };
});

System.config({
  defaultJSExtension: true,
  transpiler: null,
  packages: packages,
  map: map
});
})(this);

这是package.json：

{
	"name": "MEAN",
	"version": "0.0.7",
	"scripts": {
		"tsc": "tsc",
		"tsc:w": "tsc -w",
		"app": "node server",
		"start": "concurrently \"npm run tsc:w\" \"npm run app\" ",
		"postinstall": "typings install"
	},
	"dependencies": {
		"@angular/common": "2.1.1",
		"@angular/compiler": "2.1.1",
		"@angular/core": "2.1.1",
		"@angular/forms": "2.1.1",
		"@angular/http": "2.1.1",
		"@angular/platform-browser": "2.1.1",
		"@angular/platform-browser-dynamic": "2.1.1",
		"@angular/router": "3.1.1",
		"body-parser": "1.15.2",
		"core-js": "2.4.1",
		"compression": "1.6.0",
		"connect-flash": "0.1.1",
		"ejs": "2.5.2",
		"express": "4.14.0",
		"express-session": "1.14.1",
		"method-override": "2.3.6",
		"mongoose": "4.6.5",
		"morgan": "1.7.0",
		"passport": "0.3.2",
		"passport-facebook": "2.1.1",
		"passport-google-oauth": "1.0.0",
		"passport-local": "1.0.0",
		"passport-twitter": "1.0.4",
		"reflect-metadata": "0.1.8",
		"rxjs": "5.0.0-beta.12",
		"systemjs": "0.19.39",
		"zone.js": "0.6.26"
	},
	"devDependencies": {
		"concurrently": "3.1.0",
		"traceur": "0.0.111",
		"typescript": "2.0.3",
		"typings": "1.4.0"
	}
}

和tsconfig.json：

{
	"compilerOptions": {
		"target": "es5",
		"module": "system",
		"moduleResolution": "node",
		"sourceMap": true,
		"emitDecoratorMetadata": true,
		"experimentalDecorators": true,
		"removeComments": false,
		"noImplicitAny": false
	},
	"exclude": [
		"node_modules",
		"typings/main",
		"typings/main.d.ts"
	]
}

typings.json：

{
	"globalDependencies": {
		"core-js": "registry:dt/core-js#0.0.0+20160914114559",
		"jasmine": "registry:dt/jasmine#2.5.0+20161025102649",
		"socket.io-client":
		"registry:dt/socket.io-client#1.4.4+20160317120654",
		"node": "registry:dt/node#6.0.0+20161102143327"
	}
}

我试图将systemjs更改为webpack，但一切都变得更加令人困惑......

解决此问题需要采取哪些步骤？

Angular 2和systemjs不加载

0 个答案: