如何不使用angular-cli从零开始创建Angular 4项目？

当然没问题！我带你一步步手动搭建 Angular 4 项目，不用 Angular CLI，能让你更深入理解项目的底层配置逻辑：

1. 初始化基础项目 #

• 先创建项目文件夹并进入：mkdir angular4-manual && cd angular4-manual
• 初始化 npm 项目（自动生成 package.json）：npm init -y

2. 安装依赖包 #

核心运行依赖 #

这些是 Angular 4 运行必须的包，注意选兼容 Angular 4 的稳定版本：

npm install @angular/core@4.4.7 @angular/common@4.4.7 @angular/compiler@4.4.7 @angular/platform-browser@4.4.7 @angular/platform-browser-dynamic@4.4.7 rxjs@5.5.12 zone.js@0.8.29

开发构建依赖 #

负责编译、打包和开发服务的工具：

npm install --save-dev webpack@4.46.0 webpack-cli@3.3.12 webpack-dev-server@3.11.2 typescript@2.9.2 ts-loader@5.4.3 html-webpack-plugin@3.2.0 @types/node@8.10.66

3. 配置 TypeScript #

在项目根目录创建 tsconfig.json，这是 TypeScript 的编译规则配置：

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": ["es2015", "dom"],
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true
  },
  "exclude": ["node_modules"]
}

4. 配置 Webpack #

创建 webpack.config.js，定义打包规则和开发服务设置：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/main.ts',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: 'ts-loader',
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    extensions: ['.ts', '.js']
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],
  devServer: {
    contentBase: './dist',
    port: 4200
  }
};

5. 编写项目核心代码 #

先创建如下目录结构：

angular4-manual/
├── src/
│   ├── app/
│   │   ├── app.component.ts
│   │   └── app.module.ts
│   ├── index.html
│   └── main.ts

编写入口 HTML 文件 (src/index.html) #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Angular 4 手动搭建项目</title>
</head>
<body>
  <app-root></app-root>
</body>
</html>

编写根组件 (src/app/app.component.ts) #

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `<h1>你好，这是手动搭建的 Angular 4 项目！</h1>`
})
export class AppComponent {
  title = 'angular4-manual';
}

编写根模块 (src/app/app.module.ts) #

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

编写启动文件 (src/main.ts) #

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

platformBrowserDynamic().bootstrapModule(AppModule);

6. 添加 npm 脚本 #

修改 package.json 中的 scripts 部分，添加启动和构建命令：

"scripts": {
  "start": "webpack-dev-server --mode development --open",
  "build": "webpack --mode production"
}

7. 运行和构建项目 #

• 启动开发服务器：执行 npm start，浏览器会自动打开 http://localhost:4200，就能看到 Angular 4 页面了
• 生产环境构建：执行 npm run build，打包好的文件会输出到 dist 目录

内容的提问来源于stack exchange，提问作者BS.