Angular 2 퀵스타트 404 GET /app/main.js
Angular 2의 빠른 시작을 시도하고 있지만 작동하는지 모르겠습니다.저는 비슷한 질문을 몇 개 찾아봤지만 답을 찾지 못했습니다.누가 나를 도와줄 사람?
이건 내 코드야.
app.component.ts
import {Component} from 'angular2/core';
@Component({
selector: 'my-app',
template: '<h1>My First Angular 2 App</h1>'
})
export class AppComponent { }
메인.ts
import {bootstrap} from 'angular2/platform/browser'
import {AppComponent} from './app.component'
bootstrap(AppComponent);
색인.
<html>
<head>
<title>Angular 2 QuickStart</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<!-- 1. Load libraries -->
<!-- IE required polyfills, in this exact order -->
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/systemjs/dist/system-polyfills.js"> </script>
<script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<!-- 2. Configure SystemJS -->
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('app/main')
.then(null, console.error.bind(console));
</script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
</html>
꾸러미제이손
{
"name": "angular2-quickstart",
"version": "1.0.0",
"scripts": {
"start": "concurrently \"npm run tsc:w\" \"npm run lite\" ",
"tsc": "tsc",
"tsc:w": "tsc -w",
"lite": "lite-server",
"typings": "typings",
"postinstall": "typings install"
},
"license": "ISC",
"dependencies": {
"angular2": "2.0.0-beta.7",
"systemjs": "0.19.22",
"es6-promise": "^3.0.2",
"es6-shim": "^0.33.3",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.2",
"zone.js": "0.5.15"
},
"devDependencies": {
"concurrently": "^2.0.0",
"lite-server": "^2.1.0",
"typescript": "^1.8.2",
"typings":"^0.6.8"
}
}
tscoding.json
{
"compilerOptions": {
"target": "ES6",
"module": "system",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
},
"exclude": [
"node_modules",
"typings/main",
"typings/main.d.ts"
]
}
npm 시작 출력
> npm start
> angular2-quickstart@1.0.0 start /Users/dpcrespo/Google Drive/projects/tutorials/angular/angular2-quickstart
> concurrently "npm run tsc:w" "npm run lite"
[0]
[0] > angular2-quickstart@1.0.0 tsc:w /Users/dpcrespo/Google Drive/projects/tutorials/angular/angular2-quickstart
[0] > tsc -w
[0]
[1]
[1] > angular2-quickstart@1.0.0 lite /Users/dpcrespo/Google Drive/projects/tutorials/angular/angular2-quickstart
[1] > lite-server
[1]
[0] Version 1.8.7
[0] Syntax: tsc [options] [file ...]
[0]
[0] Examples: tsc hello.ts
[0] tsc --out file.js file.ts
[0] tsc @args.txt
[0]
[0] Options:
[0] --allowJs Allow javascript files to be compiled.
[0] --allowSyntheticDefaultImports Allow default imports from modules with no default export. This does not affect code emit, just typechecking.
[0] --allowUnreachableCode Do not report errors on unreachable code.
[0] --allowUnusedLabels Do not report errors on unused labels.
[0] -d, --declaration Generates corresponding '.d.ts' file.
[0] --experimentalDecorators Enables experimental support for ES7 decorators.
[0] --forceConsistentCasingInFileNames Disallow inconsistently-cased references to the same file.
[0] -h, --help Print this message.
[0] --init Initializes a TypeScript project and creates a tsconfig.json file.
[0] --jsx KIND Specify JSX code generation: 'preserve' or 'react'
[0] --mapRoot LOCATION Specifies the location where debugger should locate map files instead of generated locations.
[0] -m KIND, --module KIND Specify module code generation: 'commonjs', 'amd', 'system', 'umd' or 'es2015'
[0] --moduleResolution Specifies module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6).
[0] --newLine NEWLINE Specifies the end of line sequence to be used when emitting files: 'CRLF' (dos) or 'LF' (unix).
[0] --noEmit Do not emit outputs.
[0] --noEmitOnError Do not emit outputs if any errors were reported.
[0] --noFallthroughCasesInSwitch Report errors for fallthrough cases in switch statement.
[0] --noImplicitAny Raise error on expressions and declarations with an implied 'any' type.
[0] --noImplicitReturns Report error when not all code paths in function return a value.
[0] --noImplicitUseStrict Do not emit 'use strict' directives in module output.
[0] --outDir DIRECTORY Redirect output structure to the directory.
[0] --outFile FILE Concatenate and emit output to single file.
[0] --preserveConstEnums Do not erase const enum declarations in generated code.
[0] --pretty KIND Stylize errors and messages using color and context. (experimental)
[0] -p DIRECTORY, --project DIRECTORY Compile the project in the given directory.
[0] --reactNamespace Specifies the object invoked for createElement and __spread when targeting 'react' JSX emit
[0] --removeComments Do not emit comments to output.
[0] --rootDir LOCATION Specifies the root directory of input files. Use to control the output directory structure with --outDir.
[0] --sourceMap Generates corresponding '.map' file.
[0] --sourceRoot LOCATION Specifies the location where debugger should locate TypeScript files instead of source locations.
[0] --suppressImplicitAnyIndexErrors Suppress noImplicitAny errors for indexing objects lacking index signatures.
[0] -t VERSION, --target VERSION Specify ECMAScript target version: 'ES3' (default), 'ES5', or 'ES2015' (experimental)
[0] -v, --version Print the compiler's version.
[0] -w, --watch Watch input files.
[0] @<file> Insert command line options and files from a file.
[0] npm run tsc:w exited with code 0
[1] Did not detect a `bs-config.json` or `bs-config.js` override file. Using lite-server defaults...
[1] ** browser-sync options **
[1] { injectChanges: false,
[1] files: [ './**/*.{html,htm,css,js}' ],
[1] server: { baseDir: './', middleware: [ [Function], [Function] ] } }
[1] [BS] Access URLs:
[1] ------------------------------------
[1] Local: http://localhost:3000
[1] External: http://192.168.0.9:3000
[1] ------------------------------------
[1] UI: http://localhost:3001
[1] UI External: http://192.168.0.9:3001
[1] ------------------------------------
[1] [BS] Serving files from: ./
[1] [BS] Watching files...
[1] 16.03.16 11:30:42 304 GET /index.html
[1] 16.03.16 11:30:42 304 GET /styles.css
[1] 16.03.16 11:30:42 304 GET /node_modules/es6-shim/es6-shim.min.js
[1] 16.03.16 11:30:42 304 GET /node_modules/systemjs/dist/system- polyfills.js
[1] 16.03.16 11:30:42 304 GET /node_modules/angular2/bundles/angular2-polyfills.js
[1] 16.03.16 11:30:42 304 GET /node_modules/systemjs/dist/system.src.js
[1] 16.03.16 11:30:42 304 GET /node_modules/angular2/es6/dev/src/testing/shims_for_IE.js
[1] 16.03.16 11:30:42 304 GET /node_modules/rxjs/bundles/Rx.js
[1] 16.03.16 11:30:42 304 GET /node_modules/angular2/bundles/angular2.dev.js
[1] 16.03.16 11:30:42 404 GET /app/main.js
내 브라우저에서
main.ts 파일을 main.js로 변환하지 않는 것과 같습니다.
잘 부탁드립니다.
저도 이 오류가 발생했습니다.
나의 경우, 나는 이름을 지었습니다.tsconfig.json틀렸어요. 제가 바뀌었을 때.tsconfig.json,뛰었다npm install이따금npm start다 통했어요.
구성에서 맵을 변경해 보십시오.저 같은 경우에는.
System.config({
transpiler: 'typescript',
typescriptOptions: { emitDecoratorMetadata: true },
packages: {'app': {defaultExtension: 'ts'}},
map: { 'app': './app' }
});
여기서 /app은 구성 요소(")가 생성되는 폴더입니다.
인덱스에서 .html은 app/main을 참조합니다.main.ts 파일이 app이라는 이름의 폴더에 있습니까, 아니면 루트에 있습니까?
tsconfig.js그래야 한다tsconfig.json
system.config 섹션의 문제였던 것 같습니다.지도 값이 '/angular2/src/app'이었는데 잘못된 것입니다.다음 코드는 나를 위해 고쳐졌습니다.
<script>
System.config({
transpiler: 'typescript',
typescriptOptions: { emitDecoratorMetadata: true },
packages: {'app': {defaultExtension: 'ts'}},
map: { 'app': './app' }
});
System.import('app/hello_world_main')
.then(null, console.error.bind(console));
</script>
map: {'app': '/app'} - 애플리케이션의 app 폴더에서 구성 요소가 검색되는지 확인합니다.
글로벌하게 설치된 유형이 있는지 확인하고 cmd를 Lite-server로 지정합니다.typings둘 다 설치하지 않은 경우 다음을 사용하여npm install -g typings lite-server.
그리고 앱 디렉터리의 main.ts 파일 상단에 다음 코드를 추가합니다.
/// <reference path="../typings/browser.d.ts" />
지금 실행npm install && npm run
명령할 때
npm start
main.ts는 .js 파일로 옮겨지며 각 파일 이름 앞에 "app"이라는 단어가 추가됩니다.하지만 지금은systemjs.configs.js그것은main.js것은 아니다.app.main.js
제 경우에는, 제가 변했습니다.
'app': { main: 'main.js', defaultExtension: 'js' },
(각도 공식 페이지 / 각도-2-퀵 스타트에 명시되어 있음)
'app': { main: 'app.main.js', defaultExtension: 'js' },
그리고 잘 작동합니다.
이게 최선의 해결책인지 잘 모르겠어요...(피드백 부탁드립니다.)
시스템 js.config.js에서 앱에 대한 매핑을 파일에 대한 올바른 경로로 변경합니다.선:
'app': 'app', // 'dist',
다음으로 변경:
'app': '여기에 있는 경로', 상대 경로는 비워 둡니다.
몇 가지 가능성을 제안할 수 있습니다.
가지고 계십니까?main.ts당신의 해결책에?하나를 만들지 않으면 :)
만약 있다면요.시작 프로젝트가 유형 스크립트 파일을 컴파일하지 않는 옵션입니다.다음 명령을 사용해 보겠습니다.
npm run tsc
그것은 그것을 던져야 합니다.main.jstypescript 출력 폴더에서는 기본적으로 다음과 같은 폴더에 있습니다..ts파일.
마지막으로, 시작 명령에는 일반 tsc 명령이 포함되어야 합니다.다음과 같이 프로젝트(패키지.json)를 시작하는 것이 좋습니다.
npm run tsc && concurrently \"npm run tsc:w\" ...
.ts컴파일 실패).
tsconfig.json을 다음으로 변경합니다.
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true
}
}그런 다음 npm 설치를 실행하고 npm 시작하면 제대로 작동합니다.
라고 가정하면,tscoding.json가 타니다입을 했을 때 . 제가 업데이트했을 때 작동했습니다.npm그리고.node최신 버전으로
은 제가 ""만 잘 합니다.npm의 3.10.3그리고.node의 v6.5.0.
노드와 npm의 버전을 업데이트해야 할 것 같습니다.
Node.js 및 npm이 컴퓨터에 아직 없으면 설치합니다.이 예에서는 노드 v5.x.x 이상 및 npm 3.x.x 이상이 필요합니다.사용 중인 버전을 확인하려면 터미널 창에서 node -v 및 npm -v를 실행합니다.
빠른 시작 가이드의 필수 구성 요소 섹션에서 확인할 수 있습니다.
추가할 항목:
// DEMO ONLY! REAL CODE SHOULD NOT TRANSPILE IN THE BROWSER
transpiler: 'ts',
typescriptOptions: {
tsconfig: true
},
meta: {
'typescript': {
"exports": "ts"
}
},
systemjs.config.js편기위해를 main.ts.
를 추가한 경우 tsconfig.json에서
"outDir":"yourOutDir"
system.config.js에서 매핑 위치를 변경해야 합니다.
// our app is within the app folder
app: 'yourOutDir/app',
이것은 무작위로 보일 수 있지만, 그것을 갖는 것은.
<base href='/'>
로의 첫 index.html 문제를 문 를 js 로 하
확실히.
갱다하systemjs.config.js 파일
부터
'app': 'app',
로.
'app': './app',
끝나고
(function (global) {
System.config({
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
// our app is within the app folder
...
창문 밑에 문제가 있었습니다.
e.x. 프로젝트 폴더는 "tmp"입니다.
tsconfig.json은 이렇게 변경되었습니다.
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": [ "es2015", "dom" ],
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true,
"outDir":"tmp"
}
}
systemjs.config.js는 다음과 같습니다.
// our app is within the app folder
app: 'app',
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
main: 'main.js',
defaultExtension: 'js'
},
그건 효과가 있다.
tsconfig.js 파일의 "outDir": "js"를 제거하여 문제가 해결되었습니다.이제 컴파일된 모든 app.js 파일이 js 폴더가 아닌 app 폴더에 저장됩니다.
. 수동으로 컴파일 해보세요.tsc -p src그런 다음 dev 서버를 실행합니다.
및 은 프로젝트의 루트 가 ) index.styles.dll 파일에 있어야 .
빠른 시작 페이지 하단의 프로젝트 구조 확인
안녕하세요 저도 같은 문제가 있었지만 루트 폴더 내에 폴더 앱을 만들고 main.ts와 app.component.ts 파일을 it 튜토리얼 폴더 구조로 이동하는 것을 해결했습니다.
언급URL : https://stackoverflow.com/questions/36034715/angular-2-quickstart-404-get-app-main-js
'sourcecode' 카테고리의 다른 글
| Jooq native 쿼리가 연결 정보를 사용하지 않습니다. (0) | 2023.07.03 |
|---|---|
| T-SQL에 int가 아닌 숫자에 대한 이유가 있습니까? (0) | 2023.07.03 |
| postgresql - 텍스트 필드 내 문자열의 모든 인스턴스를 바꿉니다. (0) | 2023.07.03 |
| git로 만든 큰 .pack 파일을 제거합니다. (0) | 2023.07.03 |
| tight_()layout는 피규어 서브타이틀을 고려하지 않습니다. (0) | 2023.07.03 |