Question

我正在尝试在IIS上托管我的Angular应用程序，并阅读了很多内容以使用cli命令ng build。这会导致错误未找到模块。当我更改组件中的templateUrl时，错误消失了，但我的应用程序失败了。

templateUrl: 'app/account/login.component.html'           (not building)
templateUrl: 'login.component.html'          (building, but app fails with unknown path)

一开始我的应用程序中没有 .angular-cli.json 文件，所以我只是手动添加了一个。

{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"project": {
"name": "buildingprojects"
},
 "apps": [
{
  "root": "src",
  "outDir": "dist",
  "assets": [
    "assets",
    "favicon.ico"
  ],
  "index": "index.html",
  "main": "main.ts",
  "polyfills": "polyfills.ts",
  "test": "test.ts",
  "tsconfig": "tsconfig.json",
  "testTsconfig": "tsconfig.json",
  "prefix": "app",
  "styles": [
    "styles.css"
  ],
  "scripts": [],
  "environmentSource": "environments/environment.ts",
  "environments": {
    "dev": "environments/environment.ts",
    "prod": "environments/environment.prod.ts"
  }
}
],
"e2e": {
"protractor": {
  "config": "./protractor.conf.js"
}
},
"lint": [
{
  "project": "src/tsconfig.app.json",
  "exclude": "**/node_modules/**"
},
{
  "project": "src/tsconfig.spec.json",
  "exclude": "**/node_modules/**"
},
{
  "project": "e2e/tsconfig.e2e.json",
  "exclude": "**/node_modules/**"
}
],
 "test": {
"karma": {
  "config": "./karma.conf.js"
}
},
"defaults": {
"styleExt": "css",
"component": {}
}
}

的package.json

{
"name": "buildingprojects",
"version": "1.0.0",
"author": "Nick Ausloos",
"description": "Building Projects",
"main": "src/index.html",
"scripts": {
"start": "webpack --progress --watch --config src/webpack.config.js",
"dev": "lite-server -c bs-config.json",
"test": "echo \"Error: no test specified\" && exit 1"
},
"license": "UNLICENSED",
"devDependencies": {
"@angular/animations": "^4.4.4",
"@angular/cdk": "^2.0.0-beta.11",
"@angular/cli": "^1.4.8",
"@angular/common": "^4.4.4",
"@angular/compiler": "^4.4.4",
"@angular/compiler-cli": "^4.4.6",
"@angular/core": "^4.4.4",
"@angular/forms": "^4.4.4",
"@angular/http": "^4.4.4",
"@angular/material": "^2.0.0-beta.11",
"@angular/platform-browser": "^4.4.4",
"@angular/platform-browser-dynamic": "^4.4.4",
"@angular/router": "^4.4.4",
"@ng-bootstrap/ng-bootstrap": "^1.0.0-beta.5",
"@types/adal": "^1.0.29",
"@types/core-js": "^0.9.43",
"@types/jquery": "^3.2.12",
"@types/node": "^8.0.31",
"adal-angular": "^1.0.15",
"angular2-template-loader": "^0.6.2",
"awesome-typescript-loader": "^3.2.3",
"babel-core": "^6.26.0",
"babel-helpers": "^6.24.1",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.0",
"bootstrap": "^3.3.7",
"bootstrap-sass": "^3.3.7",
"concurrently": "^3.5.0",
"core-js": "^2.5.1",
"css-loader": "^0.28.7",
"expose-loader": "^0.7.3",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^1.1.4",
"free-jqgrid": "^4.14.1",
"html-loader": "^0.5.1",
"html-webpack-plugin": "^2.30.1",
"jquery": "^3.2.1",
"jsdo": "^4.3.12",
"lite-server": "^2.3.0",
"loader-utils": "^1.1.0",
"node-sass": "^4.5.3",
"postcss": "^6.0.12",
"postcss-cssnext": "^3.0.2",
"postcss-loader": "^2.0.6",
"reflect-metadata": "^0.1.10",
"rxjs": "^5.4.3",
"sass-loader": "^6.0.6",
"source-map-loader": "^0.2.2",
"style-loader": "^0.18.2",
"tslint": "^5.7.0",
"typescript": "^2.5.3",
"url-loader": "^0.5.9",
"webpack": "^3.6.0",
"webpack-dev-server": "^2.9.1",
"webpack-merge": "^4.1.0",
"zone.js": "^0.8.17"
},
"dependencies": {
"@ng-bootstrap/ng-bootstrap": "^1.0.0-beta.5",
"adal-angular": "^1.0.15",
"expose-loader": "^0.7.3"
}
}

Answer 1

我瘦了你应该先跟踪这个guid https://github.com/angular/angular-cli/wiki/stories-moving-into-the-cli，它会告诉你如何进入角度cli。

Jhon Papa发布本指南以展示如何部署到azure，对于iis https://johnpapa.net/deploy-angular-to-azure-vsts-angular-cli/是一样的

Answer 2

你可以尝试改变＆＃34; base＆＃34; index.html中的标记

<base href="./"/>

Answer 3

你在angular.json

"tsconfig": "tsconfig.json",
"testTsconfig": "tsconfig.json",

也许？

"tsconfig": "tsconfig.app.json",
"testTsconfig": "tsconfig.spec.json",

Answer 4

您写道：

一开始我的应用程序中没有.angular-cli.json文件，所以我只是手动添加了一个。

看起来您没有使用ng new创建应用程序。但您正在尝试使用ng build。我建议您使用ng new从头开始创建Angular CLI应用程序，测试其部署到IIS，而不是将自定义组件复制到它。

Answer 5

我通过用文件名替换路径解决了这个问题。这种方式构建成功，但这不是将其发布到IIS的解决方案。使用webpack bundler，只需将文件复制到IIS文件夹即可。那么唯一的问题是组件的路由。

构建Angular应用程序并在IIS上发布

5 个答案: