ZDMission

学习angular过程遇到的问题

1.Can't bind to 'ngModel' since it isn't a known property of 'input'

解决方案：

import { FormsModule } from '@angular/forms';
1

problem-1

2.No provider for Http

解决方案：

import { HttpModule } from '@angular/http';
1

problem-2

3.错误如下图片

problem-3

出现这个错误的话，估计是某一个文件的路径错误了，还有一点值得注意的是，文件的根目录是src，一切以src为准，再去看自己文件的路径

4.adminlte在angular4项目中的使用

  • 1.首先安装admin-lte
npm install admin-lte --save
1
  • 2.需要引入页面所需要的css，js等文件，如图 adminlte-1

adminlte-2 像图片中的文件最好是下载下来引入，使用网络连接的话，万一没有网了，就很尴尬了

  • 3.在本项目中，css，js文件基本都是公共的，所以把这些文件配置在angular-cli.json中，
"styles": [
  "styles.scss",
  "../node_modules/bootstrap/dist/css/bootstrap.min.css",
  "../node_modules/admin-lte/dist/css/AdminLTE.min.css",
  "../node_modules/admin-lte/dist/css/skins/_all-skins.min.css",
  "app/styles/font-awesome.min.css",
  "app/styles/ionicons.min.css"
],
"scripts": [
  "../node_modules/jquery/dist/jquery.min.js",
  "../node_modules/bootstrap/dist/js/bootstrap.min.js",
  "../node_modules/admin-lte/dist/js/app.min.js"
],
1
2
3
4
5
6
7
8
9
10
11
12
13
  • 4.设置主体皮肤样式
<body class="hold-transition skin-purple sidebar-mini">
1

如下配置选项

adminlte-3

记住angular4项目的根目录文件是src，所以一些配置的时候需要注意路径问题

5.运行ng serve出现错误，描述如下

Tried to find bootstrap code, but could not. Specify either statically analyzable bootstrap code or pass in an entryModule to the plugins options.
Error: Tried to find bootstrap code, but could not. Specify either statically analyzable bootstrap code or pass in an entryModule to the plugins options.
    at Object.resolveEntryModuleFromMain (C:\Users\HD\Desktop\FirstAngular2\node_modules\@ngtools\webpack\src\entry_resolver.js:121:15)
    at AotPlugin._setupOptions (C:\Users\HD\Desktop\FirstAngular2\node_modules\@ngtools\webpack\src\plugin.js:158:54)
    at new AotPlugin (C:\Users\HD\Desktop\FirstAngular2\node_modules\@ngtools\webpack\src\plugin.js:17:14)
    at Object.exports.getWebpackNonAotConfigPartial (C:\Users\HD\Desktop\FirstAngular2\node_modules\angular-cli\models\webpack-build-typescript.js:20:13)
    at new NgCliWebpackConfig (C:\Users\HD\Desktop\FirstAngular2\node_modules\angular-cli\models\webpack-config.js:26:42)
    at Class.run (C:\Users\HD\Desktop\FirstAngular2\node_modules\angular-cli\tasks\serve-webpack.js:20:22)
    at C:\Users\HD\Desktop\FirstAngular2\node_modules\angular-cli\commands\serve.js:108:26
    at process._tickCallback (internal/process/next_tick.js:103:7)、
1
2
3
4
5
6
7
8
9
10

解决方式：

在项目的根目录下有一个main.ts文件，

platformBrowserDynamic().bootstrapModule(AppModule);
  // .then(success => console.log('Bootstrap success'))
  // .catch(err => console.log(err));
1
2
3

屏蔽掉后边两句即可

这样的方式调用也可以

let promise = platformBrowserDynamic().bootstrapModule(AppModule);
promise.then(success => console.log('Bootstrap success'))
  .catch(err => console.log(err));
1
2
3

这样的方式调用就不可以

 platformBrowserDynamic().bootstrapModule(AppModule);
   .then(success => console.log('Bootstrap success'))
   .catch(err => console.log(err));
1
2
3

← angular2.0常用命令 →