How to solve error static file not found django - python-3.x

I'm working on a project in which I used frontend template from online website .
but I think i have put every file in correct places but instead I'm getting static file not found error.
below are important file :
setting.py
import os
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
SECRET_KEY = 'lj6ra=$c5t!2kkin(qvuk3o(wui!m(%%wktf%my!c_gbl6(7ap'
DEBUG = True
ALLOWED_HOSTS = ['*']
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'Gym/static/'),
)
# Application definition
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'Gym',
]
MIDDLEWARE = [
'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'django.middleware.common.CommonMiddleware',
'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
]
ROOT_URLCONF = 'Gym.urls'
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [os.path.join(BASE_DIR,'templates')],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]
WSGI_APPLICATION = 'Gym.wsgi.application'
# Database
# https://docs.djangoproject.com/en/3.0/ref/settings/#databases
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.sqlite3',
'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
}
}
# Password validation
# https://docs.djangoproject.com/en/3.0/ref/settings/#auth-password-validators
AUTH_PASSWORD_VALIDATORS = [
{
'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
},
]
# Internationalization
# https://docs.djangoproject.com/en/3.0/topics/i18n/
LANGUAGE_CODE = 'en-us'
TIME_ZONE = 'UTC'
USE_I18N = True
USE_L10N = True
USE_TZ = True
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/3.0/howto/static-files/
STATIC_URL = '/static/'
urls.py:
from django.contrib import admin
from django.urls import path,include
from . import views
from django.conf.urls.static import static
from django.conf import settings
urlpatterns = [
path('admin/', admin.site.urls),
path('',views.index),
]
index.html :
...
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}" type="text/css">
<link rel="stylesheet" href="{% static 'css/font-awesome.min.css' %}" type="text/css">
<link rel="stylesheet" href="{% static 'css/elegant-icons.css' %}" type="text/css">
<link rel="stylesheet" href="{% static 'css/nice-select.css' %}" type="text/css">
<link rel="stylesheet" href="{% static 'css/owl.carousel.min.css' %}" type="text/css">
<link rel="stylesheet" href="{% static 'css/magnific-popup.css' %}" type="text/css">
<link rel="stylesheet" href="{% static 'css/slicknav.min.css' %}" type="text/css">
<link rel="stylesheet" href="{% static 'css/style.css' %}" type="text/css">
...
Error i'm getting :
"""[02/Aug/2020 04:34:09] "GET /css/font-awesome.min.css HTTP/1.1" 404 2108
Not Found: /css/magnific-popup.css
Not Found: /css/nice-select.css
[02/Aug/2020 04:34:09] "GET /css/magnific-popup.css HTTP/1.1" 404 2102
Not Found: /css/owl.carousel.min.css
Not Found: /css/bootstrap.min.css
[02/Aug/2020 04:34:09] "GET /css/nice-select.css HTTP/1.1" 404 2093
Not Found: /css/elegant-icons.css
[02/Aug/2020 04:34:09] "GET /css/owl.carousel.min.css HTTP/1.1" 404 2108
[02/Aug/2020 04:34:09] "GET /css/bootstrap.min.css HTTP/1.1" 404 2099
Not Found: /css/slicknav.min.css
[02/Aug/2020 04:34:09] "GET /css/elegant-icons.css HTTP/1.1" 404 2099
[02/Aug/2020 04:34:09] "GET /css/slicknav.min.css HTTP/1.1" 404 20
"""
I also tried STATICFILES_URL but its not working , please help I'm going crazy
i have also try collectstatic but nothing happens , i dont understand the problem please help

Can you try placing css files under Gym/static/Gym/#place css files here
and in index.html use below
<link rel="stylesheet" href="{% static 'Gym/bootstrap.min.css' %}" type="text/css">

Related

Why the form doesn't show field errors and submits the form blank or invalid?

I'm creating a form where a field has a regex validator. But when I submit a blank form, it doesn't prompt the user for required field or validation error. It just redirects the user to 'ValueError at /data/
The InitialData could not be created because the data didn't validate.'
The Traceback:
Environment:
Request Method: POST
Request URL: http://127.0.0.1:8000/data/
Django Version: 3.2.4
Python Version: 3.9.5
Installed Applications:
['django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'account']
Installed Middleware:
['django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'django.middleware.common.CommonMiddleware',
'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware']
Traceback (most recent call last):
File "C:\Users\ceo\AppData\Local\Programs\Python\Python39\lib\site-packages\django\core\handlers\exception.py", line 47, in inner
response = get_response(request)
File "C:\Users\ceo\AppData\Local\Programs\Python\Python39\lib\site-packages\django\core\handlers\base.py", line 181, in _get_response
response = wrapped_callback(request, *callback_args, **callback_kwargs)
File "E:\Sonu\Projects\Billing\rough\account\views.py", line 10, in initialview
fm.save()
File "C:\Users\ceo\AppData\Local\Programs\Python\Python39\lib\site-packages\django\forms\models.py", line 460, in save
raise ValueError(
Exception Type: ValueError at /data/
Exception Value: The InitialData could not be created because the data didn't validate.
models.py:
from django.db import models
from django.core.validators import RegexValidator
# Create your models here.
class InitialData(models.Model):
pattern = RegexValidator(r'OOPL\/D\/[0-9]', 'Enter Case Number properly!')
case_number=models.CharField(max_length=12, blank=False, primary_key=True, validators=[pattern])
forms.py:
from django import forms
from django.forms import ModelForm, fields
from .models import InitialData
class TrackReportForm(forms.ModelForm):
class Meta:
model=InitialData
fields='__all__'
views.py:
from django.shortcuts import render
from .forms import TrackReportForm
from .models import InitialData
# Create your views here.
def initialview(request):
if request.method=='POST':
fm=TrackReportForm(request.POST)
if fm.is_valid:
fm.save()
return render(request, 'account/database.html', {'form':fm})
else:
fm=TrackReportForm()
return render(request, 'account/database.html', {'form':fm})
database.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="" method="post" novalidate>
{% csrf_token %}
{{form}} {{field.errors}}
<input type="submit" value="Submit">
</form>
</body>
</html>
URLs:
from django.contrib import admin
from django.urls import path
from account import views
urlpatterns = [
path('admin/', admin.site.urls),
path('data/', views.initialview),
]
Where am I wrong?
You need to change:
if fm.is_valid:
fm.save()
To the code below with brackets ():
if fm.is_valid():
fm.save()
See the docs here for is_valid().

GAE files blocked due to mimetype/unknown url handler type for js files with multiple .'s

I've been hung up on deploying my React/Django app to GAE for the last two days and I think I've isolated the issue, but I've been unable to come up with a solution that works. When I first deployed I was running into issues with mimetypes with each of my JS and CSS files embedded in my index.html being blocked with error messages like these leading me to believe it found the files but didn't handle them correctly:
(file) was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).
My understanding from browsing SO and doing research was that GAE was treating these as html files and not executing them properly. I started playing with the .yaml to enforce mime types due to some settings I saw in the references for GAE and now I can't deploy and get error message:
ERROR: (gcloud.app.deploy) An error occurred while parsing file: [(mysite)\app.yaml]
Unknown url handler type.
<URLMap
static_files=None
upload=None
application_readable=None
static_dir=None
mime_type=text/css
expiration=None
require_matching_file=None
http_headers=None
position=None
api_endpoint=None
redirect_http_response_code=None
url=/static/css\.css
login=optional
auth_fail_action=redirect
secure=default
script=None
>
in "(mysite)/app.yaml", line 8, column 1
I've been playing around with the files in the browser and I've found that I get 404 errors when I try to pull up the files despite knowing that they're in the directory. IE navigating here: https://acptconstruction.appspot.com/backend/static/js/2.738f0ca9.chunk.js yields a 404, but I can see it with the exact filename in the directory. Because of that and the error message on deployment, I think that maybe GAE is having trouble parsing the filenames because of all of the periods? The filenames were built when I ran npm run-scripts build after I was finished with the front end app, but regardless, I tried to deploy copying that file to homepage.js and including using that exact filename with the path without success.
I don't know if I was on a better track with the first yaml file, where it could "find" them (I think) and not grock them or with the second yaml where they couldn't be found? The issue might be as simple as copying all the js files and changing their names to like homepage.js and homepage2.js but I am nervous that I might break everything if I go down that path. Any help is appreciated!
Files:
Originally, my app.yaml file looked like this:
runtime: python38
handlers:
- url: /static
static_dir: static/
- url: /.*
script: auto
Updated YAML that gives the deployment errors:
runtime: python38
handlers:
- url: /static/css/(.*)
mime_type: text/css
- url: /static/js/(.*)
mime_type: text/javascript
index.html:
<!doctype html><html lang="en" style="background-color:#f1f1f1"><head><base href="/"> <meta charset="utf-8"/><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="ACPT Construction"/><link rel="manifest" href="/manifest.json"/><title>ACPT Construction</title><link type="text/css" href="/backend/static/css/2.89e89512.chunk.css" rel="stylesheet"><link type="text/css" href="/backend/static/css/main.cfd2a7ed.chunk.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root" style="min-height:1000px"></div><script>!function(e){function t(t){for(var n,c,i=t[0],l=t[1],a=t[2],f=0,s=[];f<i.length;f++)c=i[f],Object.prototype.hasOwnProperty.call(o,c)&&o[c]&&s.push(o[c][0]),o[c]=0;for(n in l)Object.prototype.hasOwnProperty.call(l,n)&&(e[n]=l[n]);for(p&&p(t);s.length;)s.shift()();return u.push.apply(u,a||[]),r()}function r(){for(var e,t=0;t<u.length;t++){for(var r=u[t],n=!0,i=1;i<r.length;i++){var l=r[i];0!==o[l]&&(n=!1)}n&&(u.splice(t--,1),e=c(c.s=r[0]))}return e}var n={},o={1:0},u=[];function c(t){if(n[t])return n[t].exports;var r=n[t]={i:t,l:!1,exports:{}};return e[t].call(r.exports,r,r.exports,c),r.l=!0,r.exports}c.m=e,c.c=n,c.d=function(e,t,r){c.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},c.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},c.t=function(e,t){if(1&t&&(e=c(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(c.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)c.d(r,n,function(t){return e[t]}.bind(null,n));return r},c.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return c.d(t,"a",t),t},c.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},c.p="/";var i=this.webpackJsonpacptconstruction=this.webpackJsonpacptconstruction||[],l=i.push.bind(i);i.push=t,i=i.slice();for(var a=0;a<i.length;a++)t(i[a]);var p=l;r()}([])</script><script type="application/javascript" src="/backend/static/js/2.738f0ca9.chunk.js"></script><script type="application/javascript" src="/backend/static/js/main.b160e3e4.chunk.js"></script></body></html>
File structure:
acptconstruction
backend
settings.py
manage.py (command to run server is python manage.py runserver)
backend
views.py (heres where index.html gets called)
urls.py (url structure)
acptconstruction (front end)
build
index.html
manifest.json
app.yaml
static
css
js
media
settings.py:
import os
# Build paths inside the project like this: os.path.join(BASE_DIR, ...)
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
# Quick-start development settings - unsuitable for production
# See https://docs.djangoproject.com/en/1.11/howto/deployment/checklist/
# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY =
# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = False
ALLOWED_HOSTS = ['*']
# Application definition
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'rest_framework',
'emailcontactform',
'corsheaders'
]
MIDDLEWARE = [
'whitenoise.middleware.WhiteNoiseMiddleware',
'corsheaders.middleware.CorsMiddleware',
'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'django.middleware.common.CommonMiddleware',
'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
]
ROOT_URLCONF = 'backend.urls'
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [os.path.join(BASE_DIR, 'acptconstruction')],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]
WSGI_APPLICATION = 'backend.wsgi.application'
# Database
# https://docs.djangoproject.com/en/1.11/ref/settings/#databases
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.sqlite3',
'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
}
}
# Password validation
# https://docs.djangoproject.com/en/1.11/ref/settings/#auth-password-validators
AUTH_PASSWORD_VALIDATORS = [
{
'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
},
]
# Internationalization
# https://docs.djangoproject.com/en/1.11/topics/i18n/
LANGUAGE_CODE = 'en-us'
TIME_ZONE = 'UTC'
USE_I18N = True
USE_L10N = True
USE_TZ = True
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/1.11/howto/static-files/
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'acptconstruction', 'build', 'static'),
]
if DEBUG:
STATIC_ROOT = os.path.join(BASE_DIR, 'backend','/static')
else:
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
EMAIL_BACKEND = 'django.core.mail.backends.smtp.EmailBackend'
EMAIL_HOST = 'smtp.gmail.com'
EMAIL_USE_TLS = True
EMAIL_PORT =
EMAIL_HOST_USER =
EMAIL_HOST_PASSWORD =
CORS_ORIGIN_WHITELIST = [
'http://localhost:3000',
'http://localhost:8000',
'http://localhost:8080',
]
https://your_app.appspot.com/backend/static/js/2.738f0ca9.chunk.js does not match any pattern in your app.yaml. Either get rid of the /backend/ part of the url, or add the handler to your app.yaml:
handlers:
- url: /static/css
static_dir: static/css
- url: /backend/static/css
static_dir: static/css
- url: /static/js
static_dir: static/js
- url: /backend/static/js
static_dir: static/js
And the mime_type error you saw was probably due to your tags in the template.html file. The proper tags are:
<link rel="stylesheet" href="styles.css">
or:
<link rel="stylesheet" type="text/css" href="styles.css">
You don't want to put text/html in those tags.

"ng2-CKEditor" node module is not working with typescript[Angular2]

I am trying to configure CKEditor in my angular2 application.
I am using node as my backend platform and i am using ng2-CKEditor npm module.
Below are my code in respective files.
index.html::
<html>
<head>
<title>Angular 2 QuickStart</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="app/images/myblog.ico" rel="icon" type="image/x-icon" />
<link rel="stylesheet" href="app/css/app.css">
<!-- 1. Load libraries -->
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="//cdn.ckeditor.com/4.5.6/standard/ckeditor.js"></script>
<!-- 2. Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
</html>
systemjs.config.ts::
/**
* System configuration for Angular 2 samples
* Adjust as necessary for your application needs.
*/
(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
app: 'app',
// angular bundles
'#angular/core': 'npm:#angular/core/bundles/core.umd.js',
'#angular/common': 'npm:#angular/common/bundles/common.umd.js',
'#angular/compiler': 'npm:#angular/compiler/bundles/compiler.umd.js',
'#angular/platform-browser': 'npm:#angular/platform-browser/bundles/platform-browser.umd.js',
'#angular/platform-browser-dynamic': 'npm:#angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'#angular/http': 'npm:#angular/http/bundles/http.umd.js',
'#angular/router': 'npm:#angular/router/bundles/router.umd.js',
'#angular/forms': 'npm:#angular/forms/bundles/forms.umd.js',
'ng2-ckeditor': 'app/utils/ckeditor/ckeditor.js',
// other libraries
'rxjs': 'npm:rxjs',
'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api',
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
main: './js/main',
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
},
'angular2-in-memory-web-api': {
main: './index.js',
defaultExtension: 'js'
}
}
});
})(this);
main.ts::
import {NgModule} from '#angular/core';
import { platformBrowserDynamic } from '#angular/platform-browser-dynamic';
import { AppModule } from './app.module';
import {FormsModule} from '#angular/forms';
import {CKEditorModule} from 'ng2-ckeditor';
const platform = platformBrowserDynamic();
#NgModule({
imports: [
CKEditorModule
],
declarations: [
AppModule,
],
bootstrap: [AppModule]
})
export class AppMain { }
platform.bootstrapModule(AppModule);
app.component.ts::
import { Component } from '#angular/core';
#Component({
selector: 'my-app',
//templateUrl: 'app/templates/write-blog.html'
template: `
<ckeditor [(ngModel)]="content" debounce="500">
<p>Hello <strong>world</strong></p>
</ckeditor>
<div [innerHTML]="content"></div>`
})
export class AppComponent {
constructor(){
//this.content = '<p>Hello <strong>World !</strong></p>'
}
}
app.module.ts
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import {FormsModule} from '#angular/forms';
import {CKEditorModule} from 'ng2-CKEditor'
import { AppComponent } from './app.component';
#NgModule({
imports: [ BrowserModule, FormsModule, CKEditorModule],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
Error::
zone.js:344 Unhandled Promise rejection: Template parse errors:
Can't bind to 'ngModel' since it isn't a known property of 'ckeditor'. ("
][(ngModel)]="content" debounce="500">
Hello world
"): AppComponent#1:14
'ckeditor' is not a known element:
1. If 'ckeditor' is an Angular component, then verify that it is part of this module.
2. If 'ckeditor' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '#NgModule.schema' of this component to suppress this message. ("
[ERROR ->]
Hello world
; Task: Promise.then ; Value: Error: Template parse errors:(…) Error: Template parse errors:
Can't bind to 'ngModel' since it isn't a known property of 'ckeditor'. ("
][(ngModel)]="content" debounce="500">
Hello world
"): AppComponent#1:14
'ckeditor' is not a known element:
1. If 'ckeditor' is an Angular component, then verify that it is part of this module.
2. If 'ckeditor' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '#NgModule.schema' of this component to suppress this message. ("
[ERROR ->]
Hello world
http://localhost:3000/node_modules/#angular/compiler/bundles/compiler.umd.js:8530:21)
at RuntimeCompiler._compileTemplate (http://localhost:3000/node_modules/#angular/compiler/bundles/compiler.umd.js:16905:53)
at eval (http://localhost:3000/node_modules/#angular/compiler/bundles/compiler.umd.js:16828:85)
at Set.forEach (native)
at compile (http://localhost:3000/node_modules/#angular/compiler/bundles/compiler.umd.js:16828:49)
at ZoneDelegate.invoke (http://localhost:3000/node_modules/zone.js/dist/zone.js:192:28)
at Zone.run (http://localhost:3000/node_modules/zone.js/dist/zone.js:85:43)
at http://localhost:3000/node_modules/zone.js/dist/zone.js:451:57
at ZoneDelegate.invokeTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:225:37)
at Zone.runTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:125:47)consoleError # zone.js:344_loop_1 # zone.js:371drainMicroTaskQueue # zone.js:375ZoneTask.invoke # zone.js:297
zone.js:346 Error: Uncaught (in promise): Error: Template parse errors:(…)consoleError # zone.js:346_loop_1 # zone.js:371drainMicroTaskQueue # zone.js:375ZoneTask.invoke # zone.js:297
As i am new to angular2 with typescript and basically for MEAN stack, please help.
I check other post for the same issue but did not help to resolve my issue.
You need to add FormsModule to your module's imports in order to use ngModel directive because it is part of FormsModule:
#NgModule({
imports: [
CKEditorModule,
FormsModule
]
Your code is also very messy, you should check out official Angular 2 quickstart app to see how your code should be structured.

nodejs / grunt usemin plugin

I'm using yeoman and grunt to build my project and grunt-css plugin for using 'cssmin' instead of 'css' built-in with grunt.js
index.html
<!-- build:css styles/styles.css -->
<link rel="stylesheet" href="styles/main.css"/>
<!-- endbuild -->
<!-- build:js scripts/scripts.js -->
<script src="scripts/vendor/jquery.min.js"></script>
<script src="scripts/vendor/handlebars-1.0.0.beta.6.js"></script>
<script src="scripts/vendor/ember-1.0.pre.min.js"></script>
<script src="scripts/main.js"></script>
<script src="scripts/routes/app-router.js"></script>
<script src="scripts/store.js"></script>
<script src="scripts/controllers/application-controller.js"></script>
<script src="scripts/models/application-model.js"></script>
<script src="scripts/views/application-view.js"></script>
<!-- endbuild -->
Gruntfile.js
rev: {
js: 'dist/scripts/**/*.js', // scripts/**/*.js
css: 'dist/styles/**/*.css', // styles/**/*.css
img: 'dist/images/**' // images/**
},
'usemin-handler': {
html: 'index.html'
},
usemin: {
html: ['dist/**/*.html'], // **/*.html
css: ['dist/**/*.css'] // **/*.css
},
rjs: {
// no minification, is done by the min task
optimize: 'none',
baseUrl: './scripts',
wrap: true
},
cssmin: {
dist: {
src: [
'app/styles/**/*.css'
],
dest: 'dist/styles/styles.css'
}
},
concat: {
dist: {
src: [
'app/scripts/**/*.js'
],
dest: 'dist/scripts/scripts.js',
separator: '/**********/\n'
}
},
min: {
dist: {
src: [
'dist/scripts/scripts.js'
],
dest: 'dist/scripts/scripts.js',
separator: '/**********/\n'
}
}
Then the build project structure is:
dist/
|__scripts/
|____04216377.scripts.js
|__styles/
|____d41d8cd9.styles.css
|__index.html
Then output index.html file
<link rel="stylesheet" href="styles/styles.css"/?>
<script src="scripts/04216377.scripts.js"></script>
As you see all went OK except renaming the revisioned styles in index.html that should be 'styles/d41d8cd9.styles.css
Anyone knows why?
And is the questionmark '?' in the line normal???
Note: for more information this is outputted in my console (no errors)
Running "rev:js" (rev) task
dist/scripts/scripts.js --- 04216377.scripts.js
Running "rev:css" (rev) task
dist/styles/styles.css --- d41d8cd9.styles.css
Running "rev:img" (rev) task
Running "usemin:html" (usemin) task
usemin:html - dist/index.html
scripts/scripts.js
was <script src="scripts/scripts.js"></script>
now <script src="scripts/04216377.scripts.js"></script>
Running "usemin:css" (usemin) task
usemin:css - dist/styles/d41d8cd9.styles.css
And no renaming has been done!
Thanks a lot guys!
I've found the problem.
I've got Yeoman 0.94 version and needs a fix on usemin task.
The ?character at <link>is a regex mistake.
You should rewrite this expression because css renaming is failing.
Found the correct workaround at https://github.com/yeoman/yeoman/issues/586
replace
content.replace(block, indent + '<link rel="stylesheet" href="' + target + '"\/?>');
with
content.replace(block, indent + '<link rel="stylesheet" href="' + target + '"/>');
If apply changes this issue is solved.
Note: apply the patch on usemin.js at /usr/local/lib/node_modules/yeoman/tasks (on OSX)

Same dojo.data-store for dijit.tree and dojox.grid

I want to implement a kind of file-browser, where the user can navigate using the folder-tree, and see the folder-content in a grid.
I want to use the same data-store for both widgets, but can't see how to achive this - the tree needs items with e.g. a children-attribute, the grid only needs those children.
because ther may be a huge dataset, I'm planning to use the jsonreststore.
i was trying with this, and got one solution like this, Please note that the grid and tree are using the same store.. Here the catch is if folder has id of fld1 then all the files under that folder should have id pattern like "fld1f1","fld1f2".
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html dir="ltr">
<head>
<style type="text/css">
body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }
</style>
<script src="djlib/dojo/dojo.js" djConfig="parseOnLoad: true"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css"/>
<link rel="stylesheet" type="text/css" href="djlib/dojox/grid/resources/Grid.css"/>
<link rel="stylesheet" type="text/css" href="djlib/dojox/grid/resources/claroGrid.css"/>
</head>
<body class=" claro ">
<div id="treeOne"></div>
<div id="gridHolder" style="height:500px"></div>
</body>
<script type="text/javascript">
s =[];
dojo.require("dijit.tree.ForestStoreModel");
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("dijit.Tree");
dojo.require("dojox.grid.DataGrid");
dojo.addOnLoad(function(){
baseStore = new dojo.data.ItemFileReadStore({
data:{
identifier: 'id',
label: 'name',
items: [
{id:'fld1',name:'folder 1', type:"folder", files:[{_reference:'fld1f1'},{_reference:'fld1f2'}]},
{id:'fld1f1',name:'file 1 of folder 1', type:"file", size:'1KB', dateLstMod:'15/15/2001'},
{id:'fld1f2',name:'file 2 of folder 1', size:'1KB', type:"file", dateLstMod:'15/15/2001'},
{id:'fld2',name:'folder 2', type:"folder", files:[{_reference:'fld2f1'},{_reference:'fld2f2'}]},
{id:'fld2f1',name:'file 1 of folder 2', size:'1KB', type:"file", dateLstMod:'15/15/2001'},
{id:'fld2f2',name:'file 2 of folder 2', size:'1KB', type:"file",dateLstMod:'15/15/2001'},
{id:'fld3',name:'folder 3', type:"folder"}
]
}
});
treeModel = new dijit.tree.ForestStoreModel({
store: baseStore,
query:{
type:'folder'
},
rootId: "root",
rootLabel: "List of folders on this drive",
childrenAttrs:['files']
})
t = new dijit.Tree({
model: treeModel
},"treeOne")
dojo.connect(t,'onClick', function(item, node, evt){
if(node.isExpandable){
updateGrid(baseStore.getValues(item,"id"));
}
})
function updateGrid(folderId){
grid.filter({
type:'file' , id:folderId+'*'
},true);
}
var gridStr = [{
cells:[
[
{ field: "name", name: "File Name", width: 'auto' },
{ field: "size", name: "Size", width: 'auto'},
{ field: "dateLstMod", name: "Date Last Modified", width: 'auto'}
]
]
}]
grid = new dojox.grid.DataGrid({
store:baseStore,
structure: gridStr,
noDataMessage:"NO DATA"
}, 'gridHolder');
grid.startup();
grid.filter({
type:'filee'
},true);
})
I think this link has the answer, you don't point the grid at the store, you create the grid and add items by iterating across the relevant children in the store
http://groups.google.com/group/dojo-interest/browse_thread/thread/af7265b19edeeb0/9fee8b5498746dd8

Resources